<template>
  <div class="MyCollect">
    <van-nav-bar
        title="我的收藏"
        left-text="返回"
        left-arrow
        @click-left="onClickLeft"
    />
    <van-tabs v-model:active="activeTab">
      <van-tab title="文章">
        <van-list
            v-model:loading="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="onLoad"
        >
          <van-cell
              v-for="article in articles"
              :key="article.articleId"
              :title="article.title"
              :label="article.content"
              :is-link="true"
              :to="'/articleDetails/' +article.articleId"
          >
            <template #right-icon>
              <van-image :src="imageUrl" width="40" height="40" round />
            </template>
            <template #label>
              <van-icon name="like-o" />
              <span class="van-ellipsis">{{ article.goods }}点赞</span>
              <span class="van-ellipsis">{{ article.views }}阅读</span>
              <span class="van-ellipsis">{{ article.commentsCount }}评论</span>
            </template>
          </van-cell>
        </van-list>
      </van-tab>
      <van-tab title="动态">
        <van-list
            v-model:loading="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="onLoad"
        >
          <div class="scroll-container">
            <van-list v-model:loading="loading"  @load="onLoad" :finished-text="finishedText"
                      :error-text="errorText">
              <div class="item" v-for="(item, index) in list1" :key="index">
                <div class="item-header">
                  <div class="item-header-left">
                    <van-image :src="item.avatar" round width="40" height="40"/>
                    <span class="item-header-name">{{ item.userId }}</span>
                    <span class="item-header-time">{{ item.createTime }}</span>
                  </div>
                  <van-tag type="primary" round size="small" v-if="item.hot">hot</van-tag>
                </div>
                <div class="item-content">
                  <p>{{ item.content }}</p>
                  <div class="image-wrapper">
                    <van-image :src="item.contentImg" width="200px" height="100px"/>
                  </div>
                  <div class="item-footer">
                    <van-icon name="like-o" size="16" class="icon"/>
                    <span class="icon-text">{{ item.praises }}</span>
                    <van-icon name="star-o" size="16" class="icon"/>
                    <span class="icon-text">{{ item.review }}</span>
                    <van-icon name="chat-o" size="16" class="icon"/>
                    <span class="icon-text">{{ item.collect }}</span>
                    <van-icon name="share-o" size="16" class="icon"/>
                    <span class="icon-text">{{ item.share }}</span>
                  </div>
                </div>
              </div>
            </van-list>
          </div>
        </van-list>
      </van-tab>
      <van-tab title="单词">
        <van-list>
          <van-cell v-for="word in words" :key="word.id" :title="word.word" :label="word.exampleSentence1" @click="showWordDetail(word)">
            <template #title>
              <div class="word-item">
                <span class="word-text">{{ word.word }}</span>
                <span class="word-chinese">（{{ word.chinese }}）</span>
              </div>
            </template>
          </van-cell>
        </van-list>
      </van-tab>
      <van-tab title="试题">
        <van-list
            v-model:loading="loading"
            :finished="finished"
            @load="onLoad"
        >
          <van-cell  v-for="n in items" :title="n.questionContent" :value="n.attTime" />
        </van-list>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script setup>
import {onMounted, ref} from 'vue'
import {useRouter} from "vue-router";
import axios from "axios";
import {showToast} from "vant";
import {get} from "../../util/request.js";
const router=useRouter();
const items=ref([]);
  get('home/getCollectQuestions').then( r=>{
    if (r.code == 0){ // 获取成功
      loading.value = true;
      // alert("查询成功")
      items.value= r.data;
      finished.value = true;
    }else {
      showToast("查询失败")
      // 加载状态结束
    }
  }).catch(function (){
    alert("全部异常")
  });

const words = ref([]);
onMounted(() => {
  get("home/wrong-questions/collectionWordList")
      .then((response) => {
        words.value = response.data;
      })
      .catch((error) => {
        console.error("Error fetching words:", error);
        showToast("数据加载失败，请稍后再试");
      });
});

const showWordDetail = (word) => {
  // 显示单词详情
  showToast(`单词: ${word.word}\n翻译: ${word.chinese}\n例句: ${word.exampleSentence1}`);
};

const onClickLeft = () => {
  router.push("/my");
  // 返回按钮逻辑
};
const activeTab = ref(0);
const loading = ref(false);
const finished = ref(false);
const onLoad = () => {
  get('study/article/all'
  ).then(
      (data) => {
        console.log(JSON.stringify(data))

        // 加载状态结束
        loading.value = false;
        finished.value = true

        if (data.code == 0) {
          showToast("查询成功");
          articles.value = data.data;// 初始化界面
        } else {
          showToast("查询失败");
        }


      })
      .catch(
          function () {
            alert("服务器错误")
          }
      )
};
axios({
  method: 'get', // post  get
  url: 'http://localhost:9099/circle/selectAll'
}).then(
    (data) => {
      console.log(JSON.stringify(data))
      console.log("获取处理器的数据：" + JSON.stringify(data.data))
      var r = data.data;

      // 加载状态结束
      loading.value = false;
      finished.value = true

      if (r.code == 0) {
        showToast("查询成功");
        list1.value = r.data;// 初始化界面
      } else {
        showToast("查询失败");
      }


    })
    .catch(
        function () {
          alert("服务器错误")
        }
    )
const users = ref([
  {id:1,name:'张三',description:'你们好你你你你你你你你你你你你你您那你你你你你你你',avatar:3}
]);
const articles = ref([])
const finishedText = ref('没有更多了');
const errorText = ref('加载失败，请稍后重试');
const list1 = ref([]);
const imageUrl = 'https://zpa-picgo.oss-cn-hangzhou.aliyuncs.com/img/20240615173401.png';
const say = ()=>{
  router.push("/Test")
}
</script>

<style scoped>
.MyCollect {
  padding: 16px;
}
</style>